<template>
  <div class="chartBox relative" v-if="data.length>0">
    <!-- 柱状图 -->
    <ve-histogram
      :style="{'transform': 'rotate('+selectedHead.rotate + 'deg)'}"
      v-if="selectedOption == '1'&&(selectedHead.rotate=='0'||selectedHead.rotate=='180')"
      :data="chartData"
      :grid="grid"
      backgroundColor="rgba(0,0,0,0)"
      :judge-width="true"
      :settings="chartSettings"
      :yAxis="yAxis"
      :extend="extend"
      :legend="legend"
      height="100%"
    ></ve-histogram>
    <!-- 条状图 -->
    <ve-bar
      :style="{'transform': 'rotate('+(selectedHead.rotate -90)+ 'deg)'}"
      v-if="selectedOption == '1'&&(selectedHead.rotate=='90'||selectedHead.rotate=='270')"
      :data="chartData"
      :grid="grid"
      backgroundColor="rgba(0,0,0,0)"
      :judge-width="true"
      :settings="chartSettings"
      :xAxis="yAxis"
      :extend="extend"
      :legend="legend"
      height="100%"
    ></ve-bar>
    <!-- 仪表盘 -->
    <ve-gauge
      v-if="selectedOption == '2'"
      :data="chartData"
      backgroundColor="rgba(0,0,0,0)"
      :extend="gaugeExtend"
      :legend="legend"
      :judge-width="true"
      height="100%"
    ></ve-gauge>
    <!-- 雷达图 -->
    <!-- <ve-radar v-if="selectedOption == '3'" :data="radarData" backgroundColor='#fff' :width='data.width' height='100%' :settings="chartSettings"></ve-radar> -->
    <!-- 折线图 -->
    <ve-line
      v-if="selectedOption == '4'"
      :data="chartData"
      :grid="grid"
      backgroundColor="rgba(0,0,0,0)"
      :settings="chartSettings"
      :yAxis="yAxis"
      :extend="extend"
      :legend="legend"
      :judge-width="true"
      height="100%"
    ></ve-line>
    <!-- 饼图 -->
    <ve-pie
      v-if="selectedOption == '5'"
      :data="chartData"
      backgroundColor="rgba(0,0,0,0)"
      :settings="chartSettings"
      :legend="legend"
      :judge-width="true"
      height="100%"
    ></ve-pie>
  </div>
</template>
<script>
export default {
  name: "Chart",
  props: {
    allData: {
      type: Array,
      required: true
    },
    selectedHead: {
      type: Object,
      required: true
    },
    index: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    },
    num: {
      type: Number,
      required: true
    }
  },
  data() {
    this.extend = {
      "xAxis.0.axisLabel.color": "#fff",
      "yAxis.0.axisLabel.color": "#fff",
       "xAxis.0.axisLine.show": "true",
       "yAxis.0.axisLine.show": "true",
       "xAxis.0.axisLine.lineStyle.color":"#25b6df",
       "yAxis.0.axisLine.lineStyle.color":"#25b6df",
    };
    (this.chartSettings = {
      // yAxisName: ['数值'],
      // xAxisName: ['时间'],
      radius: 150,
      offsetY: "50%",
      labelMap: {
        //坐标数据
        labelMap1: ""
      }
    }),
      (this.gaugeExtend = {
        series: {
          center: ["50%", "45%"],
          radius: "75%",
          axisLine: {
            lineStyle: {
              type:'dashed',
              color: [[0.25, "#00d8df"], [0.75, "#a682e6"], [1, "#e15d68"]],
              width: 30
            }
          },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          pointer: { width: 6 },
          itemStyle: { color: "#0bd3ff" },
          title: {
            offsetCenter: [0, "-30%"],
            textStyle: {
              fontWeight: "bolder",
              fontStyle: "italic",
              color: "#fff"
            }
          },
          detail: {
            formatter: "{value}%",
            offsetCenter: [0, "70%"],
            textStyle: {
              fontSize: 18,
              color: "#ffffff"
            }
          }
        }
      });

    this.restore = {
      type: "restore"
    };

    return {
      data: [],
      i: Number(this.index[4]) - 1,
      options: [
        //图表类型
        { label: "柱状图", value: "1" },
        { label: "仪表盘", value: "2" },
        // {label: "雷达图", value: "3"},
        { label: "折线图", value: "4" },
        { label: "饼图", value: "5" }
      ],
      selectedOption: "1", //当前图表
      grid: {
        top: 10,
        height: "93%",
        width: "100%"
      },
      chartData: {
        //柱状图
        columns: ["labelMap0", "labelMap1"],
        rows: [
          // { 'labelMap0': '1月1日', 'labelMap1': 1523 },
        ]
      },
      yAxis: {
        type: "value",
        show: true,
        axisLine: {
          show: true,    
          lineStyle: { color: "#25b6df", width: 1 }
        },
        axisTick: { show: false },
        axisLabel: { color: "#fff" },
        splitLine: { lineStyle: { type:'dashed',color: "#29649d" } }
      },
      
      
      legend: { show: false }
    };
  },
  created() {
    // console.log(this.num);
// console.log(this.selectedHead.UpData[this.num]);
this.data=this.selectedHead.UpData[this.num][this.i]

    let that = this;

    this.selectedOption = this.selectedHead.type[6];

    if (this.selectedOption == "2") {
       console.log('that.data',that.selectedHead.UpData)
       console.log('that.data',that.data)
        console.log('that.data',that.i)
      this.chartData.rows.push({
        labelMap0: this.selectedHead.checkRow[1],
        labelMap1: (
          (that.data[0][that.selectedHead.checkRow[1]] /
            that.data[0][that.selectedHead.checkRow[0]]) *
          100
        ).toFixed(2)
      });
    } else if (this.selectedOption == "4") {
      for (let i = 0; i < that.selectedHead.fields.length; i++) {
        this.chartData.columns.push(that.selectedHead.fields[i]);
      }
      for (var i = 0, len = that.data.length; i < len; i += 1) {
        // console.log(that.data[i])
        // console.log(that.selectedHead.checkRow[0])
        // console.log(that.data[i][that.selectedHead.checkRow[0]])
        var dataItem = { labelMap0: that.data[i][that.selectedHead.checkRow[0]]};
        that.selectedHead.fields.map(item => {
          dataItem[item] = that.data[i][item];
        });
        this.chartData.rows.push(dataItem);
        
      }
    } else if (this.selectedOption == "1") {
      that.selectedHead.fields.map(item => {
        this.chartData.columns.push(item);
      })
       for (var i = 0, len = that.data.length; i < len; i += 1) {
         var dataItem = { labelMap0: that.data[i][that.selectedHead.checkRow[0]] };
         that.selectedHead.fields.map(item => {
           dataItem[item] = that.data[i][item];
        //  this.chartData.columns.push(that.data[i][0][that.selectedHead.fields[0]]);
        });
         this.chartData.rows.push(dataItem);
       }

    //  that.selectedHead.checkRow.map(item => {
    //   //  var dataItem = { labelMap0: item };
    //   for (var i = 0, len = that.data.length; i < len; i += 1) {

        
    //           dataItem[i] = that.data[i][item];

    //   }
      

    } else {

      for (var i = 0, len = that.data.length; i < len; i += 1) {
        console.log("this.data[i]", this.data[i]);
        for (let allKey in that.data[i]) {
          that.selectedHead.checkRow.map(item => {
            if (allKey == item) {
              this.chartData.rows.push({
                labelMap0: item,
                labelMap1: that.data[i][allKey]
              });
              // this.chartData.rows.push({'labelMap0': item, 'labelMap1': that.data[that.i][allKey]})
            }
          });
        }
      }
    }

    //饼图、仪表盘适应
    let min = Math.min(this.width, this.height);
    this.chartSettings.radius = min / 2;
    this.gaugeExtend.series.axisLine.lineStyle.width = min / 12;
  },

  methods: {}
};
</script>
<style scoped>
.chartBox {
  background: rgba(0, 0, 0, 0);
}
.el-row {
  width: 100px;
  top: 10px;
  right: 35px;
  z-index: 100;
}
.settingBox {
  width: 160px;
  height: 60px;
  bottom: 10px;
  left: 10px;
  top: 50%;
  margin-top: -30px;

  margin-top: -30px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  background: #dcdcdc;
}
.settingBox p {
  width: 60px;
}
.settingBox a {
  display: block;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  color: #000;
  background: #fff;
  border-radius: 2px;
}
.icon {
  position: absolute;
  top: 15px;
  right: 10px;
  cursor: pointer;
  color: #aaa;
}
</style>
